<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="searchParam" :inline="true">
        <el-form-item class="w-[150px]" label="年份">
          <el-select
            v-model="searchParam.year"
            placeholder="请选择年份"
            filterable
          >
            <el-option
              v-for="item in yearOptions"
              :key="item"
              :value="item"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工作中心">
          <el-select
            v-model="searchParam.workshopId"
            placeholder="请选择工作中心"
            clearable
            @keyup.enter="search"
            filterable
            @change="changeWorkCenter"
          >
            <el-option
              v-for="item in workshopList"
              :key="item.id"
              :label="`${item.workshopName}`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="beforeSearch">
            <i-ep-search />
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never" class="table-container">
      <!-- <template #header>
        <el-button type="primary" @click="startExport">
          <template #icon><i-ep-download /></template>导出</el-button
        >
      </template> -->

      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="tableData"
        :maxHeight="tableHeight"
        highlight-current-row
        border
      >
        <el-table-column :label="`设备`" min-width="200" show-overflow-tooltip>
          <el-table-column
            :label="`月份`"
            min-width="200"
            show-overflow-tooltip
          >
            <template #default="scope">
              &nbsp;&nbsp;{{ scope.row.title }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="" prop="" min-width="120" show-overflow-tooltip>
          <el-table-column
            label="代号"
            prop="number"
            align="center"
            min-width="80"
            show-overflow-tooltip
          />
        </el-table-column>
        <el-table-column label="" prop="" min-width="120" show-overflow-tooltip>
          <el-table-column
            label="合计"
            prop="total"
            min-width="80"
            align="right"
            show-overflow-tooltip
          />
        </el-table-column>
        <el-table-column
          :label="workCenterName"
          prop="assetName"
          min-width="120"
          show-overflow-tooltip
        >
          <el-table-column
            v-for="(item, index) in 12"
            :label="item + '月'"
            prop="assetName"
            min-width="70"
            align="right"
            header-align="right"
            show-overflow-tooltip
          >
            <template #default="scope">
              {{ scope.row[`col${item}`] ?? "" }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {
  useTable,
  useDownload,
  useDictionary,
  useComputeTableHeight,
} from "@/utils/useTable";
import request from "@/utils/request";
import dayjs from "dayjs";
defineOptions({
  name: "EAMEQUDEVICEMANAGEREPORTOEESTATISTICS",
  inheritAttrs: false,
});

const beforeWorkCenterName = ref("");
const workCenterName = ref("");
// 初始化搜索参数数据
const searchParam = ref({
  year: dayjs().year().toString(),
  workshopId: "",
  hasFirst: "0",
});

function beforeSearch() {
  if (!searchParam.value.workshopId) {
    ElMessage.error("请选择工作中心");
    return;
  }
  search();
}

function startExport() {
  if (!tableData.value.length) {
    ElMessage.error("请先查询数据");
    return;
  }
  useDownload(
    "/eam/eamanalysismachineoee/export",
    searchParam.value.year + workCenterName + "OEE设备综合效率",
    toRaw(searchParam.value),
    true,
    ".xlsx"
  );
}

function changeWorkCenter(e) {
  const currentWorkCenter = workshopList.value.find(
    (item: any) => item.id === e
  );
  beforeWorkCenterName.value = currentWorkCenter?.workshopName ?? "";
}

// 定义tableHeight, 将计算注入dataCallBack回调中
const tableHeight = ref();

const loading = ref(false);
const tableData = ref<any>([]);
async function search() {
  loading.value = true;
  const { data } = await request({
    url: "/eam/eamanalysismachineoee/getRowToColList",
    method: "post",
    data: toRaw(searchParam.value),
  }).finally(() => {
    loading.value = false;
  });
  workCenterName.value = beforeWorkCenterName.value;
  tableData.value = data ?? [];
  setTimeout(() => {
    tableHeight.value = useComputeTableHeight();
  }, 100);
}

//工作中心
const workshopList = ref<any>([]);
const getWorkshopList = async () => {
  const { data } = await request({
    url: "/mes/mesworkshop/getList",
    method: "post",
    data: {},
  });
  workshopList.value = data;
};

// 获取年度列表
const yearOptions = ref();
async function getYears() {
  const { data } = await request({
    url: "/system/dateInfo/getYearList",
    method: "post",
    data: {},
  });
  yearOptions.value = data;
}

onMounted(() => {
  getYears();
  getWorkshopList();
});
</script>
<style lang="scss" scoped>
:deep(.search-container) {
  .el-select .el-input .el-select__caret.el-icon {
    font-style: normal;
    transform: none !important;
  }
}
:deep(.table-container .el-table--border .el-table__cell) {
  padding: 6px 0 !important;
  font-size: 13px;
}
:deep(.el-table td.el-table__cell div) {
  padding: 0 4px !important;
}
</style>
